<template>
	<view>
		<div class="coupon" :style="{ 'background-image': 'url(' + calcBackgroundImage + ')'}">
			<div class="left"><span class="left_one">￥</span><span class="left_two">{{props.coupon.couponValue}}</span></div>
			<div class="content">
				<p style="font-size: 34rpx;">{{props.coupon.couponName}}</p>
				<p style="font-size: 26rpx;margin-top: 6rpx;">{{props.coupon.createAt}}</p> 
			</div>
			<div class="right" :class="props?.coupon?.status>1?'black':''" @click="$emit('toUse')">{{text || use[props?.coupon?.status]}}</div>
		</div>
	</view>
</template>

<script setup>
	import {computed} from 'vue';
	defineEmits('toUse')
	const props = defineProps(['coupon','isCouponStatus','text'])
	const calcBackgroundImage = computed(() => {
		return props?.coupon?.status < 2 ? '/static/imgAll/优惠券.png' : '/static/imgAll/优惠券_过期.png'
	})
	const use={
		"0":"去使用",
		"1":"查看订单",
		"2":"已过期",
	}
</script>

<style lang="scss" scoped>
	.coupon {
		margin-top: 24rpx;
		height: 158rpx;
		width: 684rpx;
		border-radius: 20rpx;
		background-color: rgb(250, 138, 152);
		display: flex;
		color: white;
		font-size: 24rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: relative;
		display: flex;
		align-items: center;

		.left {
			width: 150rpx;
			height: 100%;
			text-align: center;
			line-height: 160rpx;

			.left_one {
				font-size: 36rpx;
			}

			.left_two {
				font-size: 70rpx;
				margin-left: -8rpx;
			}
		}

		.content {
			margin-left: 30rpx;
			flex: 1;
		}

		.right {
			height: 57rpx;
			width: 156rpx;
			background-color: white;
			color: #FE5067;
			font-size: 28rpx;
			text-align: center;
			line-height: 57rpx;
			border-radius: 28.5rpx;
			margin: 0rpx 12rpx;
		}
		.black{
			color: black;
		}
	}
</style>